<!--
  - Copyright (C) 2018-2019
  - All rights reserved, Designed By www.joolun.com
  
  ① 移除暂时用不到的 websocket
  ② 代码优化，补充注释，提升阅读性
-->
<template>
  <div class="msg-main">
    <div class="msg-div" :id="'msg-div' + nowStr">
      <!-- 加载更多 -->
      <div v-loading="loading"></div>
      <div v-if="!loading">
        <div class="el-table__empty-block" v-if="loadMore" @click="loadingMore">
          <span class="el-table__empty-text">点击加载更多</span>
        </div>
        <div class="el-table__empty-block" v-if="!loadMore">
          <span class="el-table__empty-text">没有更多了</span>
        </div>
      </div>
      <!-- 消息列表 -->
      <div class="execution" v-for="item in list" :key="item.id">
        <div
          class="avue-comment"
          :class="item.sendFrom === 2 ? 'avue-comment--reverse' : ''"
        >
          <div class="avatar-div">
            <img
              :src="item.sendFrom === 1 ? user.avatar : mp.avatar"
              class="avue-comment__avatar"
            />
            <div class="avue-comment__author">
              {{ item.sendFrom === 1 ? user.nickname : mp.nickname }}
            </div>
          </div>
          <div class="avue-comment__main">
            <div class="avue-comment__header">
              <div class="avue-comment__create_time">
                {{ parseTime(item.createTime) }}
              </div>
            </div>
            <div
              class="avue-comment__body"
              :style="item.sendFrom === 2 ? 'background: #6BED72;' : ''"
            >
              <!-- 【事件】区域 -->
              <div v-if="item.type === 'event' && item.event === 'subscribe'">
                <el-tag type="success" size="mini">关注</el-tag>
              </div>
              <div
                v-else-if="
                  item.type === 'event' && item.event === 'unsubscribe'
                "
              >
                <el-tag type="danger" size="mini">取消关注</el-tag>
              </div>
              <div v-else-if="item.type === 'event' && item.event === 'CLICK'">
                <el-tag size="mini">点击菜单</el-tag>【{{ item.eventKey }}】
              </div>
              <div v-else-if="item.type === 'event' && item.event === 'VIEW'">
                <el-tag size="mini">点击菜单链接</el-tag>【{{ item.eventKey }}】
              </div>
              <div
                v-else-if="
                  item.type === 'event' && item.event === 'scancode_waitmsg'
                "
              >
                <el-tag size="mini">扫码结果</el-tag>【{{ item.eventKey }}】
              </div>
              <div
                v-else-if="
                  item.type === 'event' && item.event === 'scancode_push'
                "
              >
                <el-tag size="mini">扫码结果</el-tag>【{{ item.eventKey }}】
              </div>
              <div
                v-else-if="
                  item.type === 'event' && item.event === 'pic_sysphoto'
                "
              >
                <el-tag size="mini">系统拍照发图</el-tag>
              </div>
              <div
                v-else-if="
                  item.type === 'event' && item.event === 'pic_photo_or_album'
                "
              >
                <el-tag size="mini">拍照或者相册</el-tag>
              </div>
              <div
                v-else-if="item.type === 'event' && item.event === 'pic_weixin'"
              >
                <el-tag size="mini">微信相册</el-tag>
              </div>
              <div
                v-else-if="
                  item.type === 'event' && item.event === 'location_select'
                "
              >
                <el-tag size="mini">选择地理位置</el-tag>
              </div>
              <div v-else-if="item.type === 'event'">
                <el-tag type="danger" size="mini">未知事件类型</el-tag>
              </div>
              <!-- 【消息】区域 -->
              <div v-else-if="item.type === 'text'">{{ item.content }}</div>
              <div v-else-if="item.type === 'voice'">
                <wx-voice-player
                  :url="item.mediaUrl"
                  :content="item.recognition"
                />
              </div>
              <div v-else-if="item.type === 'image'">
                <a target="_blank" :href="item.mediaUrl">
                  <img :src="item.mediaUrl" style="width: 100px" />
                </a>
              </div>
              <div
                v-else-if="item.type === 'video' || item.type === 'shortvideo'"
                style="text-align: center"
              >
                <wx-video-player :url="item.mediaUrl" />
              </div>
              <div v-else-if="item.type === 'link'" class="avue-card__detail">
                <el-link
                  type="success"
                  :underline="false"
                  target="_blank"
                  :href="item.url"
                >
                  <div class="avue-card__title">
                    <i class="el-icon-link"></i>{{ item.title }}
                  </div>
                </el-link>
                <div class="avue-card__info" style="height: unset">
                  {{ item.description }}
                </div>
              </div>
              <!-- TODO ：待完善 -->
              <div v-else-if="item.type === 'location'">
                <wx-location
                  :label="item.label"
                  :location-y="item.locationY"
                  :location-x="item.locationX"
                />
              </div>
              <div v-else-if="item.type === 'news'" style="width: 300px">
                <!-- TODO ：待测试；详情页也存在类似的情况 -->
                <wx-news :articles="item.articles" />
              </div>
              <div v-else-if="item.type === 'music'">
                <wx-music
                  :title="item.title"
                  :description="item.description"
                  :thumb-media-url="item.thumbMediaUrl"
                  :music-url="item.musicUrl"
                  :hq-music-url="item.hqMusicUrl"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="msg-send" v-loading="sendLoading">
      <wx-reply-select ref="replySelect" :objData="objData" />
      <el-button type="success" size="small" class="send-but" @click="sendMsg"
        >发送(S)</el-button
      >
    </div>
  </div>
</template>

<script>
import { getMessagePage, sendMessage } from "@/api/mp/message";
import WxReplySelect from "@/views/mp/components/wx-reply/main.vue";
import WxVideoPlayer from "@/views/mp/components/wx-video-play/main.vue";
import WxVoicePlayer from "@/views/mp/components/wx-voice-play/main.vue";
import WxNews from "@/views/mp/components/wx-news/main.vue";
import WxLocation from "@/views/mp/components/wx-location/main.vue";
import WxMusic from "@/views/mp/components/wx-music/main.vue";
import { getUser } from "@/api/mp/mpuser";

export default {
  name: "wxMsg",
  components: {
    WxReplySelect,
    WxVideoPlayer,
    WxVoicePlayer,
    WxNews,
    WxLocation,
    WxMusic,
  },
  props: {
    userId: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      nowStr: new Date().getTime(), // 当前的时间戳，用于每次消息加载后，回到原位置；具体见 :id="'msg-div' + nowStr" 处
      loading: false, // 消息列表是否正在加载中
      loadMore: true, // 是否可以加载更多
      list: [], // 消息列表
      queryParams: {
        pageNo: 1, // 当前页数
        pageSize: 14, // 每页显示多少条
        accountId: undefined,
      },
      user: {
        // 由于微信不再提供昵称，直接使用“用户”展示
        nickname: "用户",
        avatar: require("@/assets/images/profile.jpg"),
        accountId: 0, // 公众号账号编号
      },
      mp: {
        nickname: "公众号",
        avatar: require("@/assets/images/wechat.png"),
      },

      // ========= 消息发送 =========
      sendLoading: false, // 发送消息是否加载中
      objData: {
        // 微信发送消息
        type: "text",
      },
    };
  },
  created() {
    // 获得用户信息
    getUser(this.userId).then((response) => {
      this.user.nickname =
        response.data.nickname && response.data.nickname.length > 0
          ? response.data.nickname
          : this.user.nickname;
      this.user.avatar =
        response.data.avatar && this.user.avatar.length > 0
          ? response.data.avatar
          : this.user.avatar;
      this.user.accountId = response.data.accountId;
      // 设置公众号账号编号
      this.queryParams.accountId = response.data.accountId;
      this.objData.accountId = response.data.accountId;

      // 加载消息
      console.log(this.queryParams);
      this.refreshChange();
    });
  },
  methods: {
    sendMsg() {
      if (!this.objData) {
        return;
      }
      // 公众号限制：客服消息，公众号只允许发送一条
      if (this.objData.type === "news" && this.objData.articles.length > 1) {
        this.objData.articles = [this.objData.articles[0]];
        this.$message({
          showClose: true,
          message: "图文消息条数限制在 1 条以内，已默认发送第一条",
          type: "success",
        });
      }

      // 执行发送
      this.sendLoading = true;
      sendMessage(
        Object.assign(
          {
            userId: this.userId,
          },
          {
            ...this.objData,
          }
        )
      )
        .then((response) => {
          this.sendLoading = false;
          // 添加到消息列表，并滚动
          this.list = [...this.list, ...[response.data]];
          this.scrollToBottom();
          // 重置 objData 状态
          this.$refs["replySelect"].deleteObj(); // 重置，避免 tab 的数据未清理
        })
        .catch(() => {
          this.sendLoading = false;
        });
    },
    loadingMore() {
      this.queryParams.pageNo++;
      this.getPage(this.queryParams);
    },
    getPage(page, params) {
      this.loading = true;
      getMessagePage(
        Object.assign(
          {
            pageNo: page.pageNo,
            pageSize: page.pageSize,
            userId: this.userId,
            accountId: page.accountId,
          },
          params
        )
      ).then((response) => {
        // 计算当前的滚动高度
        const msgDiv = document.getElementById("msg-div" + this.nowStr);
        let scrollHeight = 0;
        if (msgDiv) {
          scrollHeight = msgDiv.scrollHeight;
        }

        // 处理数据
        const data = response.data.list.reverse();
        this.list = [...data, ...this.list];
        this.loading = false;
        if (data.length < this.queryParams.pageSize || data.length === 0) {
          this.loadMore = false;
        }
        this.queryParams.pageNo = page.pageNo;
        this.queryParams.pageSize = page.pageSize;

        // 滚动到原来的位置
        if (this.queryParams.pageNo === 1) {
          // 定位到消息底部
          this.scrollToBottom();
        } else if (data.length !== 0) {
          // 定位滚动条
          this.$nextTick(() => {
            if (scrollHeight !== 0) {
              msgDiv.scrollTop =
                document.getElementById("msg-div" + this.nowStr).scrollHeight -
                scrollHeight -
                100;
            }
          });
        }
      });
    },
    /**
     * 刷新回调
     */
    refreshChange() {
      this.getPage(this.queryParams);
    },
    /** 定位到消息底部 */
    scrollToBottom: function () {
      this.$nextTick(() => {
        let div = document.getElementById("msg-div" + this.nowStr);
        div.scrollTop = div.scrollHeight;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
@import "./comment.scss";
@import "./card.scss";

.msg-main {
  margin-top: -30px;
  padding: 10px;
}
.msg-div {
  height: 50vh;
  overflow: auto;
  background-color: #eaeaea;
  margin-left: 10px;
  margin-right: 10px;
}
.msg-send {
  padding: 10px;
}
.avatar-div {
  text-align: center;
  width: 80px;
}
.send-but {
  float: right;
  margin-top: 8px !important;
}
</style>
